<template>
	<view class="layout">
		<view class="add" @click="add">
			<uni-icons type="plusempty" size="30"></uni-icons>
			
		</view>
		
		<view class="searchNo">
			<uni-search-bar class="uni-mt-10" radius="100" placeholder="输入姓名" clearButton="auto" cancelButton="none" @confirm="search"  text-color="#1ec0ff"/>
		</view>
		
		<view class="status">
			<view class="uni-px-5">
				<uni-data-checkbox mode="tag" v-model="statusListIndex" :localdata="statusList"></uni-data-checkbox>
			</view>
			
		</view>
		
		
		
		<view class="list">
			<uni-card title="2024-10-20" extra="" v-for="(item,index) in 8" :key="index">
			
					<view class="row">
						<view class="left">
							辅导员编号
						</view>
						<view class="right">
							100001
						</view>
					</view>
					
					<view class="row">
						<view class="left">
							姓名
						</view>
						<view class="right">
							刘德华
						</view>
					</view>
					
					
					<view class="row">
						<view class="left">
							组织归属
						</view>
						<view class="right">
							市场营销系
						</view>
					</view>
					
					<view class="row">
						<view class="left">
							类别
						</view>
						<view class="right">
							生活辅导员
						</view>
					</view>
					
					<view class="row">
						<view class="left">
							班别
						</view>
						<view class="right">
							2024-1班,2024-2班,2024-3班
						</view>
					</view>
					
					<view class="bottom">
						<navigator url="">
							<view class="box">
								<image src="../../static/zlws.png" mode=""></image>
								<view class="text" style="color:red">
									删除
								</view>
							</view>
						</navigator>
						
						<navigator url="">
						<view class="box">
							<image src="../../static/zlws.png" mode=""></image>
							<view class="text">
								编辑
							</view>
						</view>
						</navigator>
						
						
						
					</view>
			
			</uni-card>
		</view>
		
		<!-- 添加弹框 -->
		<uni-popup ref='addPopup' type='bottom':safe-area="false" @maskClick="maskClick">
			<view class="addPopup">
				<view class="popheader">
					<view></view>
					<view class="title">新增</view>
					<view class="close" @click="closeGT">X</view>
				</view>
				
				<!-- 进度条 -->
				<view class="step">
					<uni-steps :options="list" :active="active" />
				</view>
				
			
				
				<scroll-view scroll-y>
						<view class="content">
							<!-- 档案资料 -->
							<view class="list" v-show="active == 0">
								<view class="rows">
									<view class="left">
										<view class="star">
											*
										</view>
										<view class="text">
											姓名
										</view>
									</view>
									<view class="right">
										<input class="uni-input" name="name" placeholder="输入姓名" :value="name"/>
												
									</view>
								</view>
								
								
								<view class="rows">
									<view class="left">
										<view class="star">
											*
										</view>
										<view class="text">
											证件类型
										</view>
									</view>
									<view class="right">
										<picker @change="certificateChange" :value="certificateIndex" :range="certificateIndexArray" name="certificate">
											<view class="uni-input">{{certificateIndexArray[certificateIndex]}}</view>
										</picker>
										<uni-icons type="forward" size="16"></uni-icons>				
									</view>
								</view>
								
													
								
								<view class="rows">
									<view class="left">
										<view class="star">
											*
										</view>
										<view class="text">
											证件号码
										</view>
									</view>
									<view class="right">
										<input class="uni-input" name="idCard" placeholder="输入证件号码" :value="idCard"/>
												
									</view>
								</view>
								
								<view class="rows">
									<view class="left">
										<view class="star">
											*
										</view>
										<view class="text">
											性别
										</view>
									</view>
									<view class="right">
										<picker @change="sexChange" :value="sexIndex" :range="sexArray" name="sex">
											<view class="uni-input">{{sexArray[sexIndex]}}</view>
										</picker>
										<uni-icons type="forward" size="16"></uni-icons>				
									</view>
								</view>
								
								<view class="rows">
									<view class="left">
										<view class="star">
											*
										</view>
										<view class="text">
											生日
										</view>
									</view>
									<view class="right">
										<picker mode="date"  @change="dateChange" :value="date" name="date" start="1970-01-01" end="2050-01-01">
											<view class="uni-input">{{date}}</view>
										</picker>
										<uni-icons type="forward" size="16"></uni-icons>				
									</view>
								</view>
								
								<view class="rows">
									<view class="left">
										<view class="star">
											*
										</view>
										<view class="text">
											手机号
										</view>
									</view>
									<view class="right">
										<input class="uni-input" name="phone" placeholder="输入手机号" :value="phone"/>
												
									</view>
								</view>
							</view>
								
							<!--组织归属-->
							<view class="list" v-show="active == 1 ">
								<view class="rows">
									<view class="left">
										<view class="star">
											*
										</view>
										<view class="text">
											组织归属
										</view>
									</view>
									<view class="right">
										<picker @change="departmentChange" :value="departmentIndex" :range="departmentArray" name="department">
											<view class="uni-input">{{departmentArray[departmentIndex]}}</view>
										</picker>
										<uni-icons type="forward" size="16"></uni-icons>
												
									</view>
								</view>
							</view>	
							
							
							<!-- 选择角色 -->
							<view class="list" v-show="active == 2 ">
								<view class="rows">
									<view class="left">
										<view class="star">
											*
										</view>
										<view class="text">
											角色选择
										</view>
									</view>
									<view class="right">
										<picker @change="counselorChange" :value="counselorIndex" :range="counselorArray" name="communicate">
											<view class="uni-input">{{counselorArray[counselorIndex]}}</view>
										</picker>
										<uni-icons type="forward" size="16"></uni-icons>
												
									</view>
								</view>
							</view>
							
							<!-- 班级选择 -->
							<view class="list" v-show="active == 3">
								<view class="rows">
									<view class="uni-px-5 uni-pb-5">
													
													<view class="text">
														<view class="star">
															*
														</view>
														<view class="text">
															班级选择
														</view>
														
													</view>
													<uni-data-checkbox mode="tag" multiple v-model="checkbox" :localdata="hobby"></uni-data-checkbox>
												</view>
									
								</view>
							</view>	
								
							<button class="but" @click="stepChange">{{next}}</button>
							
										
							 <view class="safe-area-shop">
							 	
							 </view>
							<view class="safe-area-inset-bottom">
								
							</view>
							
						</view>
				</scroll-view>
				
				
				
				
				
				
			
			</view>
		</uni-popup>
		<!-- 添加弹框结束 -->
	</view>
</template>

<script setup>
import { ref } from 'vue';
const addPopup = ref(null);//添加弹框
const departmentArray = ref(['请选择','农业经济管理系','市场营销系','企业管理系','会计学系','经济学系']);//院系
const departmentIndex = ref(0);
const counselorArray = ref(['请选择','学习辅导员','生活辅导员','心理辅导员']);//辅导员类别
const counselorIndex = ref(0);
const hobby= ref([
			{
				text: '2024-1班',
				value: 0
			}, {
				text: '2024-2班',
				value: 1
			}, {
				text: '2024-3班',
				value: 2
			},
			{
				text: '2024-4班',
				value: 3
			},
			{
				text: '2024-4班',
				value: 4
			}
]);//班级类别
const checkbox = ref([]);//班级选择
const name           = ref('');//姓名
const next      = ref('下一步');//下一步

const statusList = ref([
	{
		text:"全部",
		value:0,
	},
	{
		text:"在职",
		value:1,
	},
	{
		text:"离职",
		value:2,
	},
	{
		text:"休假",
		value:3,
	}
]);//状态选择
const statusListIndex = ref(0);//状态选择
const list =ref(
[{
					title: '档案资料'
				}, {
					title: '组织归属'
				}, {
					title: '角色选择'
				}, {
					title: '管理班级'
				}]
);
const active = ref(0); 

const certificateIndexArray = ref(['请选择证件类型','身份证','护照','港澳通行证']);//证件类型
const certificateIndex = ref(0);
const idCard = ref('');
const sexArray = ref(['请选择性别','男','女']);//性别
const sexIndex = ref(0);
const date =ref('0000-00-00');//出生日期
const phone =ref('');//手机号码

const add = ()=>{
	addPopup.value.open();
}

const search = (e)=>{
	console.log(e);
}

//院系选择
const departmentChange = (e)=>{
	departmentIndex.value = e.detail.value;
}

//辅导员类型选择
const counselorChange = (e)=>{
	counselorIndex.value = e.detail.value;
}

// 证件类型选择
const certificateChange = (e)=>{
	
	certificateIndex.value = e.detail.value;
}

// 性别选择
const sexChange = (e)=>{
	
	sexIndex.value = e.detail.value;
}

// 出生日期选择
const dateChange = (e)=>{
	
	date.value = e.detail.value;
}

const closeGT = ()=>{
	addPopup.value.close();
	active.value = 0;
	next.value ='下一步';
}

//自动关闭弹框触发
const maskClick = ()=>{
	active.value = 0;
	next.value ='下一步';
}

//进度步骤
const stepChange = ()=>{
	
	if (active.value < list.value.length - 1) {
						active.value += 1
	} 
	if(active.value ==3){
		next.value = '确认提交';
	}
}

</script>

<style lang='scss' scoped>
	 .layout{
		 padding: 20rpx 30rpx;
			.searchNo{
						  color: $xx-color-body;
			}
			.status{
				padding: 0 20rpx;
			}
		 
			 .row{
			 				  display: flex;
			 				  justify-content: space-between;
			 				  .left{
			 					  
			 				  }
			 				  
			 				  .right{
			 					 font-weight:600;
			 					 color: $xx-color-body;
			 				  }
			 }
			 
			 .bottom{
			 					border-top:0.5rpx solid #ddd;
			 					padding: 20rpx 0;
			 					margin-top: 20rpx;
			 	display: grid;
			 	gap: 10rpx;
			 	grid-template-columns: repeat(2,1fr);
			 					.box{
			 						display: flex;
			 						justify-content: center;
			 						align-items: center;
			 						color: $xx-color-body;
			 						image{
			 							width: 30rpx;
			 							height: 30rpx;
			 						}
			 					}
			 }
			 
			 .add{
				 padding: 0 10rpx;
			 }
			  
		    .addPopup{
		    	position: relative;
		    	background:#fff;
		    	padding: 30rpx;
		    	border-radius: 30rpx 30rpx 0 0;
		    	overflow: hidden;
		    	width:100vw;
		    	
		    	scroll-view{
		    		max-height: 60vh;
					height: 45vh;
		    	}
				.popheader{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title{
						color:$xx-color-body;
						font-size: 28rpx;
					}
					.close{
						padding: 4rpx;
					}
				}
				
				.step{
					padding: 30rpx 0;
					border-bottom:1rpx solid #ccc;
					margin-bottom: 30rpx;
				}
		    	
		    	.content{
						.list{
							height: 35vh;
							.rows{
								display: flex;
								justify-content: space-between;
								font-size: 26rpx;
								line-height: 60rpx;
								border-bottom: 1rpx solid #ccc;
								margin-bottom: 20rpx;
								.left{
									display: flex;
									justify-content: space-between;
									.star{
										color:red;
									}
								}
								.right{
									display: flex;
									justify-content: space-between;
									align-items: center;
									text-align: right;
									color:$xx-color-body;
								}
								
								.text{
									display: flex;
									.star{
										
										color:red;
									}
								}
						}
					
					}
					
					.rowsText{
						padding: 30rpx 0;
							.uni-title{
								
								font-size: 26rpx;
							}
							.uni-textarea{
								border: 1rpx solid $xx-color-body;
							}
					}
					
					.but{
								width: 500rpx;
								height: 80rpx;
								border-radius: 40rpx;
								background: $xx-color-body;
								color: #fff;
								
					}
					button::after{ border: none;}
					button{
						line-height:80rpx;
					}      			
								
		    		
		    	}
		    }
		 
	 }      
</style>
